<template>
  <!--  柱状图-->
  <div ref="chart" style="width:100%;height:250px"></div>



</template>

<script>
export default {
  name: "Barvar",
  props:{
    barDate1:{
      type:Array,
      default(){
        return[]
      }
    },
    barDate2:{
      type:Array,
      default() {
        return [];
      }
    }
  },
  created() {
    this.setI1 = setInterval(this.getA1,1000)
    this.setI2 = setInterval(this.getEchartData,1000);
  },
  beforeDestroy() {
    clearInterval(this.setI1)
    clearInterval(this.setI2)
  },
  data(){
    return{
      setI1:"",
      setI2:"",
    }
  },
  methods: {
    publicDate(a,b){
      if(this.barDate1[a] > 95){
       return this.barDate1[a] -=30
      }else {
        return this.barDate1[a]+=b;
      }
    },
    getA1() {
      this.publicDate(0, 2)
      this.publicDate(1, 3)
      this.publicDate(2, 1)
      this.publicDate(3, 4)
      this.publicDate(4, 3)
      this.publicDate(5, 2)
      this.publicDate(6, 6)
    },

    getEchartData() {
      const chart = this.$refs.chart;
      if (chart) {
        const myChart = this.$echarts.init(chart);
        const option = {
          title:{
            text:'任务完成度',
            textStyle:{
              color: 'cyan'
            }
          },
          tooltip:{
            trigger:'item'
          },
          grid: {
            // top:'60%',
            left: '3%',
            right: '4%',
            bottom:'1%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: this.barDate2,
           axisLine:{
              lineStyle:{
                color:'white'
              }
           }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color:'white'
              }
            }
          },
          series: [
            {
              // data: [this.a1, this.a2, this.a3, this.a4,this.a5, this.a6,this.a7,],
              data:this.barDate1,
              type: 'bar',
              itemStyle: {
                normal: {
                  //这里是重点
                  color: function(params) {
                    //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                    var colorList = ['#00FA9A','cyan', '#F5F5DC', '#F8F8FF', '#FFD700','#FFDEAD', '#FFFFF0'];
                    return colorList[params.dataIndex]
                  }
                }
              },
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.3)'
              }
            }
          ]
        };

        myChart.setOption(option);
        //当窗口发送变化的时候，改变图表的大小
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      //防止多次触发窗口发送变化
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
  },
};
</script>

<style scoped>

</style>
